<template>
	<view class="container">
		<view class="orderNum">
			订单号2646663656154
		</view>
		<view class="userInfo">
			<view class="left">
				<image class="avatar" src="/static/logo.png" mode=""></image>
				<text>优选</text>
				<image class="right" src="/static/image/right.png" mode=""></image>
			</view>
			<view class="status noFish">
				待发货
			</view>
		</view>
		<view class="goodsInfo">
			<image src="/static/logo.png" mode=""></image>
			<view class="info">
				<text>哪吒动漫可爱趣味周边哪吒钥匙扣高颜值挂件送朋友钥匙扣哪吒动漫可爱趣味周边哪吒钥匙扣高颜值挂件送朋友钥匙扣</text>
				<text>哪吒周边钥匙扣哪吒周边钥匙扣【随机一个】</text>
			</view>
			<view class="price">
				<text>￥56.00</text>
				<text>x1</text>
			</view>
		</view>
		<view class="time">
			<view class="left">
				<text>2025/02/21</text>
				<text>17:05</text>
			</view>
			<view class="right">
				<text>预计结算</text>
				<text>￥56.00</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 686rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.time {
			margin-top: 40rpx;
			margin-bottom: 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.right {
				color: rgba(42, 42, 42, 1);

				text {
					&:first-child {
						font-size: 28rpx;
						margin-right: 5rpx;
					}

					&:last-child {
						font-size: 38rpx;
						font-weight: 700;
					}
				}
			}

			.left {
				font-size: 24rpx;
				color: rgba(153, 153, 153, 1);

				text {
					margin-right: 15rpx;
				}
			}
		}

		.goodsInfo {
			display: flex;
			box-sizing: border-box;

			.price {
				display: flex;
				flex-direction: column;
				text-align: right;
				font-size: 28rpx;

				&:first-child {
					color: rgba(42, 42, 42, 1);
					margin-bottom: 5rpx;
				}

				&:last-child {
					line-height: 39rpx;
					color: rgba(106, 106, 106, 1);
				}
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				text {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					font-weight: 500;

					&:first-child {
						-webkit-line-clamp: 2;
						color: rgba(42, 42, 42, 1);
					}

					&:last-child {
						-webkit-line-clamp: 1;
						color: rgba(153, 153, 153, 1);
					}
				}
			}

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				margin-right: 25rpx;
				flex-shrink: 0;
			}
		}

		.userInfo {
			margin: 35rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.status {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(189, 189, 189, 1);
			}

			.noFish {
				color: rgba(255, 127, 6, 1);
			}

			.left {
				display: flex;
				align-items: center;

				image {
					vertical-align: middle;
				}

				text {
					margin: 0 15rpx;
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(42, 42, 42, 1);
				}

				.avatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}

				.right {
					width: 14rpx;
					height: 22rpx;
					vertical-align: middle;
				}
			}
		}

		.orderNum {
			font-size: 26rpx;
			color: rgba(102, 102, 102, 1);
			padding-bottom: 20rpx;
			border-bottom: 0.5rpx solid rgba(238, 238, 238, 1);
		}
	}
</style>